<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery仿微信公众号自定义菜单界面操作代码</title>

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<!-- 自定义样式 -->
<link rel="stylesheet" href="/css/wx-custom.css">
<style>
.msg-context__item {
	display: none;
}
</style>
<link rel="stylesheet" href="/js/plugins/theme/default/layer.css">
<body>
<span id="smalltext" th:text="${gzh.smalltext}" style="display: none;"></span>
<span id="gzhId" th:text="${gzh.id}" style="display: none;"></span>
	<div class="container">
		<!-- 自定义菜单 -->
		<h3>自定义菜单</h3>
		<div class="custom-menu-edit-con">
			<div class="hbox">
				<div class="inner-left">
					<div class="custom-menu-view-con">
						<div class="custom-menu-view">
							<div class="custom-menu-view__title">公众号名称</div>
							<div class="custom-menu-view__body">
								<div class="weixin-msg-list">
									<ul class="msg-con"></ul>
								</div>
							</div>
							<div id="menuMain" class="custom-menu-view__footer">
								<div class="custom-menu-view__footer__left"></div>
								<div class="custom-menu-view__footer__right">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="inner-right">
					<div class="cm-edit-after" style="display: none;">
						<div class="cm-edit-right-header b-b">
							<span id="cm-tit"></span> <a id="delMenu" class="pull-right"
								href="javascript:;">删除菜单</a>
						</div>
						<form class="form-horizontal wrapper-md" name="custom_form">
							<div class="form-group">
								<label class="col-sm-2 control-label">菜单名称:</label>
								<div class="col-sm-5">
									<input name="custom_input_title" type="text"
										class="form-control" ng-model="menuname" value=""
										placeholder="" ng-maxlength="5">
								</div>
								<div class="col-sm-5 help-block">
									<div
										ng-show="custom_form.custom_input_title.$dirty&amp;&amp;custom_form.custom_input_title.$invalid-maxlength">字数不超过5个汉字或16个字符</div>
									<div class="font_sml" style="display: none;">若无二级菜单，可输入20个汉字或60个字符</div>
								</div>
							</div>
							<div class="form-group" id="radioGroup">
								<label class="col-sm-2 control-label">菜单内容:</label>
								<div class="col-sm-10 LebelRadio">
									<label class="checkbox-inline">
										<input type="radio"name="radioBtn" value="sendmsg" checked=""> 发送消息</label> 
									<label class="checkbox-inline">
										<input type="radio" name="radioBtn" value="link"> 跳转网页</label>
										<label class="checkbox-inline">
										<input type="radio" name="radioBtn" value="xcx"> 小程序</label>
								</div>
							</div>
						</form>

						<div class="cm-edit-content-con" id="editMsg">
							<div class="editTab">
								<div class="editTab-heading">
									<ul class="msg-panel__tab">
										<li class="msg-tab_item on"><span
											class="msg-icon msg-icon-tuwen"></span> 图文消息</li>
									</ul>
								</div>
								<div class="editTab-body">
									<div class="msg-panel__context">
										<div class="msg-context__item">
											<div class="msg-panel__center msg-panel_select"
												data-toggle="modal" data-target="#selectModal">
												<span class="message-plus">+</span><br>从素材库中选择
											</div>
										</div>
										<div class="msg-template"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="cm-edit-content-con" id="editPage">
							<div class="cm-edit-page">
								<div class="row">
									<label class="col-sm-6 control-label" style="text-align: left;">粉丝点击该菜单会跳转到以下链接:
									</label>
								</div>
								<div class="row">
									<label class="col-sm-2 control-label" style="text-align: left;">页面地址:
									</label>
									<div class="col-sm-5">
										<input type="text" name="url" class="form-control"
											placeholder="认证号才可手动输入地址"> <span class="help-block">必填,必须是正确的URL格式</span>
									</div>
								</div>
							</div>
						</div>
						
						<div class="cm-edit-content-con" id="xcx">
							<div class="cm-edit-page">
								<div class="row">
									<label class="col-sm-6 control-label" style="text-align: left;">粉丝点击该菜单会跳转到小程序:
									</label>
								</div>
								<div class="row">
									<label class="col-sm-2 control-label" style="text-align: left;">页面地址:
									</label>
									<div class="col-sm-5">
										<input type="text" name="url2" class="form-control"> <span class="help-block"></span>
									</div>
								</div>
								<div class="row">
									<label class="col-sm-2 control-label" style="text-align: left;">小程序appid:
									</label>
									<div class="col-sm-5">
										<input type="text" name="appId" class="form-control"> <span class="help-block"></span>
									</div>
								</div>
								<div class="row">
									<label class="col-sm-2 control-label" style="text-align: left;">小程序页面路径:
									</label>
									<div class="col-sm-5">
										<input type="text" name="url2xcx" class="form-control"> <span class="help-block"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="cm-edit-before">
						<h5>点击左侧菜单进行操作</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="cm-edit-footer">
			<button id="sortBtn" type="button" class="btn btn-default">菜单排序</button>
			<button id="sortBtnc" type="button" class="btn btn-default">完成排序</button>
			<button id="saveBtns" type="button" class="btn btn-info1">保存</button>
		</div>
	</div>

	<script src="/js/jquery-1.11.1.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<!-- 自定义菜单排序 -->
	<script src="/js/Sortable.js"></script>
	<script src="/js/plugins/layer/layer.js"></script>
	<script>
	$(function(){
		var mId=null;
		//显示自定义按钮组
		
		var currButtonIndex;
		var	currSubIndex;

		var smalltext = $('#smalltext').text();  
			var mj=JSON.parse(smalltext);
			console.log(smalltext)
			var mId = null;
			//显示自定义按钮组
			var obj = {
				"menu" : mj
			};
		var tempObj={};//存储HTML对象
		var button=obj.menu.button;//一级菜单
		//显示异常
		if(obj.errcode){
			$('#abnormalModal').modal('show');
		}
		//一级菜单对象
		function parents(param){
			this.name=param;
			this.sub_button=[];
		}
		//二级菜单对象
		function subs(param){
			this.name=param;
		}
		var objp=new parents();
		var objs=new subs();
		var ix=button.length;//一级菜单数量
		var menu='<div class="custom-menu-view__menu"><div class="text-ellipsis"></div></div>';
		// 页面底部菜单栏设置类名
		var customBtns=$('.custom-menu-view__footer__right');
		if(button.length>0){
			showMenu();
			//$('.cm-edit-before').hide();
			$('.cm-edit-after').hide();
		}else{
			addMenu();
			$('.cm-edit-before').siblings().hide();
		}
		//显示第一级菜单
		function showMenu(){
			if(button.length==1){
				appendMenu(button.length);
				showBtn();
				$('.custom-menu-view__menu').css({
					width:'50%',
				});
			}
			if(button.length==2){
				appendMenu(button.length);
				showBtn();
				$('.custom-menu-view__menu').css({
					width:'33.3333%',
				});
			}
			if(button.length==3){
				appendMenu(button.length);
				showBtn();
				$('.custom-menu-view__menu').css({
					width:'33.3333%',
				});
			}
			for(var b=0;b<button.length;b++){
				$('.custom-menu-view__menu')[b].setAttribute('alt',b);
			}
		}
		//显示子菜单
		function showBtn(){
			for(var i=0;i<button.length;i++){
				var text=button[i].name;
				var list=document.createElement('ul');
				list.className="custom-menu-view__menu__sub";
				$('.custom-menu-view__menu')[i].childNodes[0].innerHTML=text;
				$('.custom-menu-view__menu')[i].appendChild(list);
				if(button[i].sub_button != null){
					for(var j=0;j<button[i].sub_button.length;j++){
						var text=button[i].sub_button[j].name;
						var li=document.createElement("li");
						var tt=document.createTextNode(text);
						var div=document.createElement('div');
						li.className='custom-menu-view__menu__sub__add';
						li.id='sub_'+i+'_'+j;//设置二级菜单id
						div.className="text-ellipsis";
						div.appendChild(tt);
						li.appendChild(div);
						$('.custom-menu-view__menu__sub')[i].appendChild(li);
					}
					//子菜单的个数
					var ulBtnL=button[i].sub_button.length;
					//创建 li i div 元素
					var iLi=document.createElement("li");
					var ii=document.createElement('i');
					var iDiv=document.createElement("div");
					// 对应标签添加类名
					ii.className="glyphicon glyphicon-plus text-info";
					iDiv.className="text-ellipsis";
					iLi.className='custom-menu-view__menu__sub__add';
					// 将 i 追加到 div 中
					iDiv.appendChild(ii);
					// 将 div 追加到 li 中
					iLi.appendChild(iDiv);
					if(ulBtnL<5){
						$('.custom-menu-view__menu__sub')[i].appendChild(iLi);
					}
				}
			}
		}
		//显示添加的菜单
		function appendMenu(num){
			//创建 li i div 元素
			var menuDiv=document.createElement('div');
			var mDiv=document.createElement('div');
			var mi=document.createElement('i');
			// 对应标签添加类名
			mi.className='glyphicon glyphicon-plus text-info iBtn';
			mDiv.className='text-ellipsis';
			menuDiv.className='custom-menu-view__menu';
			// 将 i 追加到 div 中
			mDiv.appendChild(mi);
			// 将 div 追加到 div 中
			menuDiv.appendChild(mDiv)

			switch(num){
				case 1:
				customBtns.append(menu);
				customBtns.append(menuDiv);
				break;
				case 2:
				customBtns.append(menu);
				customBtns.append(menu);
				customBtns.append(menuDiv);
				break;
				case 3:
				customBtns.append(menu);
				customBtns.append(menu);
				customBtns.append(menu);
				break;
			}
		}
		//初始化菜单按钮
		function addMenu(){
			var menuI='<div class="custom-menu-view__menu"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info iBtn"></i></div></div>';
			var sortIndex=true;
			customBtns.append(menuI);
			var customFirstBtns=$('.custom-menu-view__menu');
			var firstBtnsLength=customFirstBtns.length;
			if(firstBtnsLength<=1){
				customFirstBtns.css({
					width:'100%',
				})
			}
		}
		//添加菜单按钮
		var customEl='<div class="custom-menu-view__menu"><div class="text-ellipsis">新建菜单</div></div>'
		var customUl='<ul class="custom-menu-view__menu__sub"><li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info"></i></div></li></ul>';
		var customLi='<li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis">新建子菜单</div></li>';
		$('.iBtn').parent().on('click',function(){
			var num=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu').length;
			var ulNum=$(this).parents('.custom-menu-view__menu').prev().find('.custom-menu-view__menu__sub').length;
			ix++;
			if(ix<4){
				$(this).parent().before(customEl);
				$(this).parent().prev().append(customUl);
				
				$('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
				$(this).parent().prev().addClass('subbutton__actived');

				//一级菜单列数
				var buttonIndex=$(this).parents('.custom-menu-view__menu').index()-1;
				$('.custom-menu-view__menu').eq(buttonIndex).on('click',(function(buttonIndex){
					var txt=$('.custom-menu-view__menu').eq(buttonIndex).text();
					setMenuText(txt);
				})(buttonIndex));
						
				if(ix==1){
					$('.custom-menu-view__menu').css({
						width:'50%'
					});
					$('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
				}
				if(ix==2){
					$('.custom-menu-view__menu').css({
						width:'33.3333%'
					});
					$('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
				}
				var divText=$(this).parent().prev().find('.text-ellipsis').text();
				button.push(new parents(divText));
			}
			if(ix==3){
				$(this).parents('.custom-menu-view__menu').remove();
				$(this).parent().append(customUl);
				$('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
			}
			$('.cm-edit-after').show().siblings().hide();
			
		});
		var setMenuText=function(value){
			setInput(value);
			updateTit(value);
			
			radios[0].checked=true;
			$('#editMsg').show();
	  		$('#editPage').hide();
	  		$('#editInvite').hide();
	  		$('#xcx').hide();
	  		$('.msg-context__item').show();
			$('.msg-template').hide();
		}
		function setSubText(){
			var actived=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');
			var activedTxt=$('.subbutton__actived').text();
			if(actived){
				setInput(activedTxt);
				updateTit(activedTxt);
				
				radios[0].checked=true;
				$('#editMsg').show();
		  		$('#editPage').hide();
		  		$('#xcx').hide();
		  		$('#editInvite').hide();
		  		$('.msg-context__item').show();
				$('.msg-template').hide();
			}
		}
		//添加子菜单
		var colIndex;//一级菜单列数
		customBtns.on('click','li>.text-ellipsis>i',function(){
			//绑定删除事件
			$('.msg-panel__del').on('click',delClick);
			colIndex=$(this).parents('.custom-menu-view__menu').attr('alt');
			currButtonIndex=colIndex;
			var liNum=$(this).parents('.custom-menu-view__menu').find('li').length;
			if(liNum<=1){
				$('#reminderModal').modal('show');
			}else{
				if(liNum<6){
					$(this).parent().parent().before(customLi);
					setLiId();
				}
				if(liNum==5){
					$(this).parents('li').remove();
				}
			}
			$('#radioGroup').show();
			setSubText()
		});
		//确定添加子菜单事件
		$('.reminder').click(function(){
			var ul=$('.custom-menu-view__menu')[colIndex].getElementsByTagName('ul')[0];
			var li=document.createElement('li');
			var div=document.createElement('div');
			var Text=document.createTextNode('新建子菜单');
			li.className="custom-menu-view__menu__sub__add";
			div.className="text-ellipsis";
			div.appendChild(Text);
			li.appendChild(div);
			ul.insertBefore(li,ul.childNodes[0]);
			setLiId();
			delete button[colIndex].type;
			delete button[colIndex].key;
			delete button[colIndex].url;
			$('#reminderModal').modal('hide');

			setSubText()
		});
		//对新添加二级菜单添加id
		function setLiId(){
			var prev=$('.custom-menu-view__menu')[colIndex].getElementsByTagName('i')[0].parentNode.parentNode.previousSibling;
			var divText=prev.childNodes[0].innerHTML;
			button[colIndex].sub_button.push(new subs(divText));
			var id=button[colIndex].sub_button.length-1;
			currSubIndex=id;
			prev.setAttribute('id','sub_'+colIndex+'_'+id);
			
			$('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
			$('.custom-menu-view__menu').eq(colIndex).find('i').parent().parent().prev().addClass('subbutton__actived');
		}
		//点击菜单
		customBtns.on('click','.text-ellipsis',function(){
			if(button[0].name == '' || button[1].name == '' || button[2].name == ''){
				alert("名称不可为空");
				return;
			}
			$('.cm-edit-after').show().siblings().hide();
			if($(this).parent().attr('id') || $(this).parent().attr('alt')){
				$(this).parents('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
				$(this).parent().addClass('subbutton__actived');
			}
			//一级菜单列数
			var buttonIndex=$(this).parents('.custom-menu-view__menu').index();
			if($('.msg-context__item').is(':hidden')){
				$('.msg-template').show();
			}else if($('.msg-context__item').is(':visible')){
				$('.msg-template').hide();
			}
			//点击在一级菜单上
			if($(this).parent().attr('alt')){

				if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
					var current=$('.subbutton__actived');
					var alt=current.attr('alt');
					var lis=current.find('ul>li');
					setInput(button[buttonIndex].name);
					updateTit(button[buttonIndex].name);
					if(lis.length>1){
						$('#editMsg').hide();
				  		$('#editPage').hide();
				  		$('#editInvite').hide();
				  		$('#radioGroup').hide();
				  		$('#xcx').hide();
					}else{
						if(button[buttonIndex].type=='click'){
							radios[2].checked=true;
							$('#editMsg').hide();
					  		$('#editPage').hide();
					  		$('#editInvite').hide();
					  		$('#radioGroup').show();
					  		$('#xcx').hide();
					  		
					  	//拿key换取mediaId					
							subKey=button[buttonIndex].key;
							$('.msg-template').html($('#'+subKey).html());
							delElement();
							//绑定删除事件
							$('.msg-panel__del').on('click',delClick);

							$('.msg-template').html(tempObj[button[buttonIndex].key]);
						}else if(button[buttonIndex].type=='view'){
							$('input[name="url"]').val(button[buttonIndex].url);
							radios[1].checked=true;
							$('#editMsg').hide();
							$('#xcx').hide();
					  		$('#editPage').show();
					  		$('#radioGroup').show();
						}else if(!button[buttonIndex].type){
							radios[0].checked=true;
							$('#editMsg').hide();
					  		$('#editPage').hide();
					  		$('#editInvite').hide();
					  		$('#radioGroup').hide();
					  		$('#xcx').hide();
						}
						if(button[buttonIndex].key){
							$('.msg-context__item').show();
							$('.msg-template').hide();
						}else{
							$('.msg-context__item').show();
							$('.msg-template').hide();
						}
					}
				
				}

			}	
			//点击在二级菜单上
			if($(this).parent().attr('id')){
				var substr=$(this).parent().attr('id').lastIndexOf('_')+1;
				var subIndex=$(this).parent().attr('id').substring(substr);
				currButtonIndex=buttonIndex;
				currSubIndex=subIndex;
				var subText=button[buttonIndex].sub_button[subIndex].name;
				var subUrl=button[buttonIndex].sub_button[subIndex].url;
				var subType=button[buttonIndex].sub_button[subIndex].type;
				var subKey=button[buttonIndex].sub_button[subIndex].key;
				var subUrl2 = button[buttonIndex].sub_button[subIndex].url2;
				var subAppId = button[buttonIndex].sub_button[subIndex].appid;
				var subUrl2xcx = button[buttonIndex].sub_button[subIndex].pagepath;
				if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
					setInput(subText);
					updateTit(subText);
					$('#radioGroup').show();
					if(subType=='click'){
						radios[0].checked=true;
						$('#editMsg').show();
						$('#editPage').hide();
						$('#editInvite').hide();
						$('#xcx').hide();
						$('input[name="key"]').val(subKey);
						
						var msgTemp=$('.msg-template');
						var delEl='<span class="msg-panel__del del-tuwen">删除</span>';
						if(subKey!=null){
							msgTemp.html($('#'+subKey).html());
							delElement();
							msgTemp.find('.mask-bg').hide();
							msgTemp.siblings().hide();
							msgTemp.show();
							tempObj[subKey]=msgTemp.html();
						}
					}else if (subType == 'miniprogram') {
						radios[2].checked = true;
						$('#editMsg').hide();
						$('#xcx').show();
						$('#editPage').hide();
						$('#editInvite').show();
						button[currButtonIndex].sub_button[currSubIndex].type='miniprogram';
						$('input[name="url2"]').val(subUrl2);
						$('input[name="appId"]').val(subAppId);
						$('input[name="url2xcx"]').val(subUrl2xcx);
					}else if(subType=='view'){
						radios[1].checked=true;
						$('#editMsg').hide();
						$('#editPage').show();
						$('#xcx').hide();
						$('#editInvite').hide();
						$('input[name="url"]').val(subUrl);
					}else if(!subType){
						radios[0].checked=true;
						$('#editMsg').hide();
						$('#xcx').show();
				  		$('#editPage').hide();
						$('#editInvite').hide();
				  		$('input[name="url"]').val('');
				  		$('input[name="url2"]').val('');
				  		$('input[name="appId"]').val('');
				  		$('input[name="url2xcx"]').val('');
					}
					if(subKey){
						$('.msg-context__item').hide();
						$('.msg-template').show();
					}else{
						$('.msg-context__item').show();
						$('.msg-template').hide();
					}
				}
			}	
			//绑定删除事件
			$('.msg-panel__del').on('click',delClick);
		});
		//设置右边input的value
		function setInput(val){
			$('input[name="custom_input_title"]').val(val);
		}
		//实时更新右侧顶部标题
		function updateTit(text){
			$('#cm-tit').html(text);
		}
		//保存右侧菜单名称
		$('input[name="custom_input_title"]').keyup(function(){
			var val=$(this).val();
			var current=$('.subbutton__actived');
			if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
				var row=current.attr('id').lastIndexOf('_')-1;
				var col=current.attr('id').lastIndexOf('_')+1;
				var sub_row=current.attr('id').substr(row,1);
				var sub_col=current.attr('id').substring(col);
				button[sub_row].sub_button[sub_col].name=val;
				current.find('.text-ellipsis').text(val);
				updateTit(val);
			}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
				var alt=current.attr('alt');
				button[alt].name=val;
				current.children('.text-ellipsis').text(val);
				updateTit(val)
			}

		});
		//保存右侧跳转页面的url
		$('input[name="url"]').keyup(function(){
			var val=$(this).val();
			var current=$('.subbutton__actived');
			if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
				var row=current.attr('id').lastIndexOf('_')-1;
				var col=current.attr('id').lastIndexOf('_')+1;
				var sub_row=current.attr('id').substr(row,1);
				var sub_col=current.attr('id').substring(col);
				button[sub_row].sub_button[sub_col].url=val;
				button[sub_row].sub_button[sub_col].type='view';
				if(button[sub_row].sub_button[sub_col].url==''){
					delete button[sub_row].sub_button[sub_col].url;

				}
			}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
				var alt=current.attr('alt');
				button[alt].url=val;
				button[alt].type='view';
				if(button[alt].url==''){
					delete button[alt].url;
				}
			}

		});
		//保存邀请的链接地址
		$('input[name="url2xcx"]').keyup(function(){
			var val=$(this).val();
			var current=$('.subbutton__actived');
			if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
				var row=current.attr('id').lastIndexOf('_')-1;
				var col=current.attr('id').lastIndexOf('_')+1;
				var sub_row=current.attr('id').substr(row,1);
				var sub_col=current.attr('id').substring(col);
				button[sub_row].sub_button[sub_col].pagepath=val;
				button[sub_row].sub_button[sub_col].type='miniprogram';
				if(button[sub_row].sub_button[sub_col].pagepath==''){
					delete button[sub_row].sub_button[sub_col].pagepath;
				}
			}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
				var alt=current.attr('alt');
				button[alt].key=val;
				button[alt].type='click';
				if(button[alt].pagepath==''){
					delete button[alt].pagepath;
				}
			}

		});
		
		//保存邀请的链接地址
		$('input[name="url2"]').keyup(function(){
			var val=$(this).val();
			var current=$('.subbutton__actived');
			if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
				var row=current.attr('id').lastIndexOf('_')-1;
				var col=current.attr('id').lastIndexOf('_')+1;
				var sub_row=current.attr('id').substr(row,1);
				var sub_col=current.attr('id').substring(col);
				button[sub_row].sub_button[sub_col].url2=val;
				button[sub_row].sub_button[sub_col].type='miniprogram';
				if(button[sub_row].sub_button[sub_col].url2==''){
					delete button[sub_row].sub_button[sub_col].url2;
				}
			}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
				var alt=current.attr('alt');
				if(button[alt].url2==''){
					delete button[alt].url2;
				}
			}

		});
		
		//保存邀请的链接地址
		$('input[name="appId"]').keyup(function(){
			var val=$(this).val();
			var current=$('.subbutton__actived');
			if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
				var row=current.attr('id').lastIndexOf('_')-1;
				var col=current.attr('id').lastIndexOf('_')+1;
				var sub_row=current.attr('id').substr(row,1);
				var sub_col=current.attr('id').substring(col);
				button[sub_row].sub_button[sub_col].appid=val;
				button[sub_row].sub_button[sub_col].type='miniprogram';
				if(button[sub_row].sub_button[sub_col].appid==''){
					delete button[sub_row].sub_button[sub_col].appid;
				}
			}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
				var alt=current.attr('alt');
				button[alt].key=val;
				button[alt].type='click';
				if(button[alt].appid==''){
					delete button[alt].appid;
				}
			}

		});
		//保存邀请的链接地址
			$('input[name="key"]').keyup(function(){
				var val=$(this).val();
				var current=$('.subbutton__actived');
				if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
					var row=current.attr('id').lastIndexOf('_')-1;
					var col=current.attr('id').lastIndexOf('_')+1;
					var sub_row=current.attr('id').substr(row,1);
					var sub_col=current.attr('id').substring(col);
					button[sub_row].sub_button[sub_col].key=val;
					button[sub_row].sub_button[sub_col].type='click';
					if(button[sub_row].sub_button[sub_col].key==''){
						delete button[sub_row].sub_button[sub_col].key;

					}
				}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
					var alt=current.attr('alt');
					button[alt].key=val;
					button[alt].type='click';
					if(button[alt].key==''){
						delete button[alt].key;
					}
				}

			});

		//自定义菜单排序
		$('#sortBtnc').click(function(){
			var btnWrap=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu');
			var numBtn=btnWrap.length;
			$('#sortBtnc').hide();
			$('#sortBtn').show();
			$('#saveBtns').show();
			$('.iBtn').parents('.custom-menu-view__menu').show();
			if(button.length>0){
				$('.cm-edit-after').show().siblings().hide();
			}else{
				$('.cm-edit-before').show().siblings().hide();
			}
			
			for(var n=0;n<numBtn;n++){
				var ul=btnWrap[n].getElementsByTagName('ul')[0];
				if(ul){
					(function(n){
						ul.setAttribute('id','menuStage_2_'+(n+1));
						sortIndex=false;
						sortable(n+1,sortIndex);
						//$('.text-ellipsis>i').parents('li').show();
						var i_el='<li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info"></i></div></li>';
						$('.custom-menu-view__menu__sub').eq(n).append(i_el);
					})(n);
					if(ix==1){
						$('.custom-menu-view__menu').css({
							width:'50%'
						})
					}
					if(ix==2){
						$('.custom-menu-view__menu').css({
							width:'33.3333%'
						});
					}

				}
			}
		});
		$('#sortBtn').click(function(){
			var btnWrap=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu');
			var numBtn=btnWrap.length;
			$('#sortBtnc').show();
			$('#sortBtn').hide();
			$('#saveBtns').hide();
			$('.iBtn').parents('.custom-menu-view__menu').hide();
			$('.cm-drag-before').show().siblings().hide();
			for(var n=0;n<numBtn;n++){
				var ul=btnWrap[n].getElementsByTagName('ul')[0];
				if(ul){
					(function(n){
						ul.setAttribute('id','menuStage_2_'+(n+1));
						sortIndex=true;
						sortable(n+1,sortIndex);
						$('.text-ellipsis>i').parents('li').remove();
					})(n);
					if(ix==1){
						$('.custom-menu-view__menu').css({
							width:'100%'
						})
					}
					if(ix==2){
						$('.custom-menu-view__menu').css({
							width:'50%'
						});
					}

				}
			}

		});
		function sortable(m,sortIndex){
			if(sortIndex){
				Sortable.create(document.getElementById('menuStage_2_'+m), {
					animation: 300, //动画参数
					disabled: false, 
				});
			}else{
				var el = document.getElementById('menuStage_2_'+m);
				var sortable = Sortable.create(el,{
					disabled: true,
				});
				sortable.destroy(); 

			}
		}

		//tab切换
		$('.msg-panel__tab>li').click(function(){
			$('.msg-panel__tab>li').eq($(this).index()).addClass('on').siblings().removeClass('on');
			$('.msg-panel__context').eq($(this).index()).removeClass('hide').siblings().addClass('hide')
		});

		//菜单内容跳转
		var radios=document.getElementsByName("radioBtn");
		  for ( var n= 0; n < radios.length; n++) {
		  	radios[n].index=n;
		  	radios[n].onchange=function(){
		  		if (radios[this.index].checked==true) {
		  			console.log( currButtonIndex);
		  			console.log(currSubIndex);
		  			console.log(radios[this.index].checked);
		  			var subText=button[currButtonIndex].sub_button[currSubIndex].name;
					var subUrl=button[currButtonIndex].sub_button[currSubIndex].url;
					var subType=button[currButtonIndex].sub_button[currSubIndex].type;
					var subKey=button[currButtonIndex].sub_button[currSubIndex].key;
					var subUrl2 = button[currButtonIndex].sub_button[currSubIndex].url2;
					var subAppId = button[currButtonIndex].sub_button[currSubIndex].appid;
					var subUrl2xcx = button[currButtonIndex].sub_button[currSubIndex].pagepath;
				  	if(radios[this.index].value=='link'){						
				  		$('#editMsg').hide();
				  		$('#editPage').show();
				  		$('#editInvite').hide();
				  		$('#xcx').hide();
				  		button[currButtonIndex].sub_button[currSubIndex].type='view';
				  		$('input[name="url"]').val(subUrl);
				  	}else if(radios[this.index].value=='click'){
				  		$('#editMsg').hide();
				  		$('#editPage').hide();
						$('#editInvite').show();
						$('#xcx').hide();
						$('input[name="url"]').val(subUrl);
				  	}else if (radios[this.index].value == 'xcx'){
						$('#xcx').show();
						$('#editMsg').hide();
						$('#editPage').hide();
						$('#editInvite').hide();
						button[currButtonIndex].sub_button[currSubIndex].type='miniprogram';
						$('input[name="url2"]').val(subUrl2);
						$('input[name="appId"]').val(subAppId);
						$('input[name="url2xcx"]').val(subUrl2xcx);
					}else{
						button[currButtonIndex].sub_button[currSubIndex].type='click';
						$('#editMsg').show();
						$('#editPage').hide();
						$('#xcx').hide();
						$('#editInvite').hide();
					}
				}
		  	};
		  }
		//id为selectModal弹框选中遮罩层
		$('#selectModal .modal-body .panel').click(function(){
			$(this).find('.mask-bg').show();
			$(this).parent().siblings().find('.mask-bg').hide();
			mId=$(this).parent().attr('id');
		});
		//id为selectModal弹框确定按钮事件
		$('#selectModal .ensure').on('click',function(){
			var msgTemp=$('.msg-template');
			var delEl='<span class="msg-panel__del del-tuwen">删除</span>';
			if(mId!=null){
				msgTemp.html($('#'+mId).html());
				delElement();
				msgTemp.find('.mask-bg').hide();
				msgTemp.siblings().hide();
				msgTemp.show();
				tempObj[mId]=msgTemp.html();
				//绑定删除事件
				$('.msg-panel__del').on('click',delClick);
				var current=$('.subbutton__actived');
				var input_name=$('input[name="custom_input_title"]');
				if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
					var row=current.attr('id').lastIndexOf('_')-1;
					var col=current.attr('id').lastIndexOf('_')+1;
					var sub_row=current.attr('id').substr(row,1);
					var sub_col=current.attr('id').substring(col);

					button[sub_row].sub_button[sub_col].name=input_name.val();
					button[sub_row].sub_button[sub_col].key=mId;
					button[sub_row].sub_button[sub_col].type='click';
				}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
					var alt=current.attr('alt');
					button[alt].name=input_name.val();
					button[alt].key=mId;
					button[alt].type='click';
				}

			}
			$('#selectModal').modal('hide');
		});
		//type为click时添加删除按钮元素
		function delElement(){
			var msgTemp=$('.msg-template');
			var delEl='<span class="msg-panel__del del-tuwen">删除</span>';
			msgTemp.append(delEl);
			if(msgTemp.find('span').length==0){
				msgTemp.append(delEl);
			}
		};
		var delClick=function(){
			$('.msg-template').empty();
			$('.msg-context__item').show();
			$('.mask-bg').hide();

			var current=$('.subbutton__actived');
			if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
				var row=current.attr('id').lastIndexOf('_')-1;
				var col=current.attr('id').lastIndexOf('_')+1;
				var sub_row=current.attr('id').substr(row,1);
				var sub_col=current.attr('id').substring(col);
				delete button[sub_row].sub_button[sub_col].key;
			}else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
				var alt=current.attr('alt');
				delete button[alt].key;
			}
		};
		//删除菜单按钮
		$('#delMenu').click(function(){
			var is_Actived=$('.custom-menu-view__menu').hasClass('subbutton__actived');//一级菜单选择项
			var is_actived=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');//二级菜单选中项
			var rowIndex=0;
			var colIndex=0;

			if(is_Actived){
				alert('一级菜单不可删除')
				/* rowIndex=$('.subbutton__actived').attr('alt');
				$('.subbutton__actived').remove();
				delete button[rowIndex]; */
			}else if(is_actived){
				rowIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')-1,1);
				colIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')+1,1);
				$('.subbutton__actived').remove();
				delete button[rowIndex].sub_button[colIndex];
			}
			//清除右边数据
			$('.cm-edit-before').show().siblings().hide();
			updateTit('');
			setInput('');
			$('input[name="url"]').val('');
			$('input[name="appId"]').val('');
	  		$('input[name="url2xcx"]').val('');
			$('.msg-template').children().remove();
			$('.msg-context__item').show();

			//saveAjax2();
		})
		//保存自定义菜单
		$('#saveBtns').click(function(){
			console.log('保存菜单');
			var activeBtn=$('.custom-menu-view__menu').hasClass('subbutton__actived');
			var activeSubBtn=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');
			var rowIndex=0;
			var colIndex=0;
			var url=null;
			var strRegex ='(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]';  
			var re=new RegExp(strRegex);   
			
			if(activeBtn){
				rowIndex=$('.subbutton__actived').attr('alt');
			}else if(activeSubBtn){
				rowIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')-1,1);
				colIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')+1,1);
			}

			console.log('activeBtn:' + activeBtn);
			console.log('activeSubBtn:' + activeSubBtn);


			if(activeBtn){
				//一级菜单
				console.log("button[rowIndex]:" + button[rowIndex]);
				if(button[rowIndex].hasOwnProperty('url')){
					url=button[rowIndex].url;
					if (!re.test(url)) {   
						alert("请输入正确的url地址！");
					   return false;   
					  }  
					saveAjax();
				}else{
					console.log('判断菜单的key');
					// alert("菜单内容不能为空！");
					saveAjax();
				}
			}else if(activeSubBtn){
				//二级菜单
				if(button[rowIndex].sub_button[colIndex].hasOwnProperty('url')){
					url=button[rowIndex].sub_button[colIndex].url;
					saveAjax();
				}else if(button[rowIndex].sub_button[colIndex].hasOwnProperty('key')){
					key=button[rowIndex].sub_button[colIndex].key;
					// alert("菜单内容不能为空！");
					saveAjax();
				}else{
					saveAjax();
				}
			}else{
				saveAjax();
			}
		});
			//保存
			function saveAjax() {
				var gzhId = $('#gzhId').text();  
				var row = new Array();
				row['smalltext'] = obj['menu'];
				console.log(row)
				$.ajax({
					type : "POST",
					url : "/config/gzhConfig/gzhUpdate",
					data : {
						id: gzhId,"smalltext" : JSON.stringify(obj['menu']),//先将对象转换为字符串再传给后台
					},
					dataType : "json",
					success : function(data) {
						console.log(data);
						if (data.code == 1) {
							alert("创建成功！");
							location.reload();
						} else {
							layer.alert(data.msg);
						}
					}
				});
			}
		});
	
	
	function saveAjax2() {
		var gzhId = $('#gzhId').text();  
		var row = new Array();
		row['smalltext'] = obj['menu'];
		console.log(row)
		$.ajax({
			type : "POST",
			url : "/config/gzhConfig/gzhAdd2",
			data : {
				id: gzhId,"smalltext" : JSON.stringify(obj['menu']),//先将对象转换为字符串再传给后台
			},
			dataType : "json",
			success : function(data) {
				console.log(data);
			}
		});
	}
	</script>
	<div id="selectModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span>×</span>
					</button>
					<h4 class="modal-title">选择图片</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div id="col_1" class="col-xs-4">
							<div class="panel panel-default">
								<div class="panel-heading msg-date">08月12日</div>
								<div class="panel-body">
									<h5 class="msg-title">微信缴费使用指南1</h5>
									<div class="msg-img">
										<img
											src="/img/20170831595cf16beb634972a65adb6b14abca9b.jpg"
											alt="">
									</div>
									<p class="msg-text">微信缴费使用指南</p>
								</div>
								<div class="mask-bg">
									<div class="mask-icon">
										<i class="icon-ok"></i>
									</div>
								</div>
							</div>
						</div>
						<div id="col_2" class="col-xs-4">
							<div class="panel panel-default">
								<div class="panel-heading msg-date">08月31日</div>
								<div class="panel-body">
									<h5 class="msg-title">微信缴费使用指南2</h5>
									<div class="msg-img">
										<img src="/img/1.png" alt="">
									</div>
									<p class="msg-text">微信缴费使用指南</p>
								</div>
								<div class="mask-bg">
									<div class="mask-icon">
										<i class="icon-ok"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info ensure">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	<div id="reminderModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span>×</span>
					</button>
					<h4 class="modal-title">温馨提示</h4>
				</div>
				<div class="modal-body">
					<h5>添加子菜单后，一级菜单的内容将被清除。确定添加子菜单？</h5>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info reminder">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>

	<div id="abnormalModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span>×</span>
					</button>
					<h4 class="modal-title">温馨提示</h4>
				</div>
				<div class="modal-body">
					<h5>数据异常</h5>
				</div>
				<div class="modal-footer">
					<!-- <button type="button" class="btn btn-info reminder">确定</button> -->
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>